<template>
  <div class="content">
    <div class="filter-bar">
      <el-select v-model="selectedCounty" placeholder="全部">
        <el-option
          v-for="county in counties"
          :key="county.value"
          :label="county.label"
          :value="county.value"
        ></el-option>
      </el-select>

      <el-select v-model="selectedType" placeholder="全部类型">
        <el-option
          v-for="type in types"
          :key="type.value"
          :label="type.label"
          :value="type.value"
        ></el-option>
      </el-select>

      <el-select v-model="searchField" placeholder="隐患点名称">
        <el-option
          v-for="field in searchFields"
          :key="field.value"
          :label="field.label"
          :value="field.value"
        ></el-option>
      </el-select>

      <el-input v-model="searchQuery" placeholder="请输入关键字" style="max-width: 150px;"></el-input>

      <el-button type="primary" @click="handleSearch">查找</el-button>
      <el-button @click="showAll">显示全部</el-button>
      <el-button>新增隐患点</el-button>

      <span class="info-text">隐患点数量: {{ total }} 个</span>


    </div>

    <el-table
      :data="groupData"
      style="width: 100%"
      stripe
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      :row-style="rowStyle"
    >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :fixed="column.fixed"
        :min-width="column.minWidth"
      >
        <template v-if="column.slot" v-slot="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange"
      style="margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<script>
import Request from '@/api/user/request';
export default {
  data() {
    return {
      groupData: [],
      list: [],
      currentPage: 1,
      pageSize: 9,
      total: 0,
      selectedCounty: '', 
      selectedType: '', 
      selectedJob: '', 
      searchField: '隐患点名称', 
      searchQuery: '',
      change: '地质灾害隐患点管理', 
      counties: [
        { label: '全部', value: '' },
        { label: '雨城', value: '雨城' },
        { label: '名山', value: '名山' },
        { label: '经开', value: '经开' },
        { label: '天全', value: '天全' },
        { label: '芦山', value: '芦山' },
        { label: '宝兴', value: '宝兴' },
        { label: '荥经', value: '荥经' },
        { label: '汉源', value: '汉源' },
        { label: '石棉', value: '石棉' }
      ],
      jobs: [],
      columns: [
        { prop: "dsid", label: "隐患点编号", fixed: "left", minWidth: "25%" },
        { prop: "clazz", label: "类型", fixed: "left", minWidth: "18%" },
        { prop: "dsname", label: "名字", minWidth: "35%" },
        { prop: "lon", label: "经度", minWidth: "25%" },
        { prop: "lat", label: "纬度", minWidth: "25%" },
        { prop: "altitude", label: "海拔", minWidth: "25%" },
        { prop: "county", label: "区县", minWidth: "20%" },
        { prop: "town", label: "乡镇", minWidth: "25%" },
        { prop: "village", label: "村", minWidth: "25%" },
        { prop: "street", label: "街道", minWidth: "20%" },
        { prop: "time", label: "编辑时间", minWidth: "25%" },
        { prop: "work", label: "操作", minWidth: "35%", slot: true }
      ],
      types: [],
      searchFields: [
        { label: '隐患点名称', value: 'dsname' },
        { label: '隐患点编号', value: 'dsid' },
        { label: '乡镇', value: 'town' },
      ],

    };
  },
  watch: {
    selectedCounty(newVal) {
    this.fetchData(); 
  }
  },
  methods: {

    async fetchData() {
      try {
        const response = await Request.get('/newDisasterPoint/list', {
          params: {
            pageNum: 1,
            pageSize: 9999,
            county: this.selectedCounty || '',
          }
        });

        if (response.status === 200) {
          this.list = response.data.data.list;
          this.total = this.list.length;
          console.log(response.data.data.list);
          const counties = [];
          const clazzSet = new Set();

          this.list.forEach(item => {
            clazzSet.add(item.clazz); 
          });


          this.types = [
            { label: '全部类型', value: '' },
            ...Array.from(clazzSet).map(clazz => ({ label: clazz, value: clazz }))
          ];

          this.groupData = this.list.map(item => ({
            dsid: item.dsid,
            clazz: item.clazz,
            dsname: item.dsname,
            lon: item.lon,
            lat: item.lat,
            altitude: item.altitude,
            county: item.county,
            town: item.town,
            village: item.village,
            street: item.street,
            time: item.editTime
          }));
          this.updateDisplayedData();
        } else {
          console.log('请求出错');
        }
      } catch (error) {
        console.error('请求失败', error);
      }
    },
    updateDisplayedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.groupData = this.list.slice(start, end); 
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.updateDisplayedData();
    },
    handleSearch() {
      console.log('搜索内容:', this.searchField, this.searchQuery);
      this.fetchData();
    },
    showAll() {
      this.searchQuery = '';
      this.selectedCounty = '';
      this.selectedType = '';
      this.fetchData(); 
    },
    handleEdit(row) {
      console.log('编辑行:', row);
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('删除行:', row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    headerCellStyle() {
      return {
        background: "#0c2340",
        color: "#fff"
      };
    },
    cellStyle() {
      return {
        background: "#05152e",
        color: "#fff"
      };
    },
    rowStyle() {
      return {
        height: "30px"
      };
    }
  },
  mounted() {
    this.fetchData();
  },

};
</script>

<style scoped>
.content {
  justify-content: center;
  max-width: 90%;
  margin-left: 10vh;
}

.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-bar .el-select,
.filter-bar .el-input,
.filter-bar .el-button {
  margin-right: 10px;
}

.info-text {
  margin-left: 20px;
  margin-right: 20px;
  color: #FFD700; 
}
</style>
